<template>
    <div style="padding: 30px">
        <el-container style="height: 900px; border: 1px solid #eee">
            <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
                <div class="block">
                        <p>管理员组</p>
                        <el-tree
                        :data="groupList"
                        show-checkbox
                        node-key="id"
                        default-expand-all
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span @click="getUsers(data,culpage,pagesize)">{{ node.label }}</span>
                            <span>
                            <el-button
                                type="text"
                                size="mini"
                                @click="() => append(data)">
                                添加
                            </el-button>
                            <el-button
                                type="text"
                                size="mini"
                                @click="() => remove(node, data)">
                                删除
                            </el-button>
                            </span>
                        </span>
                        </el-tree>
                    </div>

            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <span >{{groupName}}</span>
                        <el-button v-if="isShow" icon="el-icon-plus" circle style="margin-left: 20px;" @click='addUser'></el-button>
                    </el-dropdown>

                </el-header>

                <el-main>
                    <el-dialog title="userTitle" :visible.sync="dialogFormVisible" width="500px">
                        <el-form :model="userForm">
                            <el-form-item label="用户头像" :label-width="formLabelWidth">
                                <el-upload
                                        class="avatar-uploader"
                                        action="exam/fileInfo/uploadFile"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess">
                                    <img v-if="userface" :src="userface" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="姓名" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="姓名"
                                        v-model="userForm.name"
                                        >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="手机号码" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="手机号码"
                                        v-model="userForm.phone"
                                        >
                                </el-input>
                            </el-form-item>

                            <el-form-item label="住宅电话" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="住宅电话"
                                        v-model="userForm.telephone"
                                        >
                                </el-input>
                            </el-form-item>

                            <el-form-item label="联系地址" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="联系地址"
                                        v-model="userForm.address"
                                        >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="权限" >
                                <div>
                                    <template>
                                        <div style="margin: 15px 0;">
                                            <el-checkbox-group  v-model="userForm.roleIds" @change="handleCheckedCitiesChange">
                                                <el-checkbox v-for="role in roleList" :label="role.id" :key="role.id">{{role.nameZh}}</el-checkbox>
                                            </el-checkbox-group>
                                        </div>
                                    </template>
                                </div>
                            </el-form-item>
                            <el-form-item label="用户名" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="用户名"
                                        v-model="userForm.username"
                                        :disabled =userForm.id
                                        >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="密码" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="密码"
                                        v-model="userForm.password"
                                        type="password">
                                </el-input>
                            </el-form-item>

                            <el-form-item label="确认密码" :label-width="formLabelWidth">
                                <el-input
                                        placeholder="确认密码"
                                        v-model="reppassword"
                                        type="password">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveOrEditUser">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-table :data="userData.list">
                        <el-table-column  label="头像" width="140">
                             <template slot-scope="scope">
                                 <el-col :span="12">
                                    <div class="demo-basic--circle">
                                        <div class="block"><el-avatar shape="square" :size="50" :src="scope.row.userface"></el-avatar></div>

                                    </div>
                                </el-col>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号码" width="140">
                        </el-table-column>
                        <el-table-column prop="telephone" label="住宅电话" width="140">
                        </el-table-column>
                        <el-table-column prop="address" label="联系地址" width="120">
                        </el-table-column>
                        <el-table-column prop="username" label="用户名" width="140">
                        </el-table-column>
                        <el-table-column prop="createAt" label="日期" width="140">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="editUser(scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <div class="block">

                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page=culpage
                                :page-sizes="[10, 50, 100, 200]"
                                :page-size=pagesize
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="userData.totalSize">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {Message} from "element-ui";

    let id = 1000;
    export default {
        name: "Manager",

        data(){
            return {
                groupName: '',
                groupId:'',
                groupList:[],
                usesDisabled:false,
                defaultProps: {
                    children: 'childGroup',
                    label: 'name',
                    id: 'id'
                },
                userData:{},
                pagesize:10,
                culpage:1,
                isShow:false,
                dialogFormVisible: false,
                userForm:{},
                userTitle : "新增用户",
                userface:'',
                roleList:[],
                roleIds:[],
                formLabelWidth:150,
                reppassword:'',
            }

        },
        methods:{
            //加载分组
            loadGroupList() {
                this.getRequest('/api/tg/group/loadGroupList').then(resp=>{
                    this.groupList.push(resp.data.data)
                })
            },
            //删除分组
             remove(node, data) {
                 this.$confirm('是否删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.postRequest('api/tg/group/delGroup/'+data.id).then(resp=>{
                        const parent = node.parent;
                        const children = parent.data.childGroup || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        children.splice(index, 1);
                    })
                })
            },
            //添加分组
             append(data) {
                this.$prompt('请输名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    }).then(({ value }) => {

                        const queryParam  = {name:value,parentId:data.id};
                        this.postRequestJson('api/tg/group/addGroup',queryParam).then(resp=>{
                             const newChild = { id: resp.data.data.id,name:value,childGroup: [] };
                             if (!data.childGroup) {
                                this.$set(data, 'childGroup', []);
                            }
                            data.childGroup.push(newChild);
                        })

                        this.$message({
                            type: 'success',
                            message: '请输名称: ' + value
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });

            },
            //根据部门id查找用户
            getUsers(data,currentPage, pageSize) {
                this.isShow = true
                this.groupId = data.id
                this.groupName = data.name
                const param = {id:data.id,currentPage:currentPage, pageSize:pageSize}
                this.postRequestJson('api/tg/userInfo/getUsersByDeptId', param).then(resp=>{
                    this.userData = resp.data.data
                })
            },
            //加载权限列表
            getRoles(){
                this.getRequest("api/tg/role/roleTree").then(res=>{
                    this.roleList = res.data.data
                })
            },
            saveOrEditUser(){
                this.userForm.groupId = this.groupId
                this.userForm.userface = this.userface;
                this.postRequestJson("api/tg/userInfo/addOrEditUser" ,this.userForm).then(p=>{
                    if(p.data.code==='0'){
                        Message.success(p.data.message)
                        const param = {id:this.groupId}
                        this.getUsers(param, this.culpage,this.pagesize)
                    }else{
                        Message.warning(p.data.message)
                    }

                })
            },
            //添加用户弹出
            addUser(){
                this.getRoles()
                this.dialogFormVisible = true
                this.userface=''
                this.userForm={'roleIds':[] }
            },
            //编辑用户弹出
            editUser(data){
                this.getRoles()
                this.dialogFormVisible = true
                this.userface= data.userface
                this.userForm=data
            },
            handleSizeChange(val) {
                this.pagesize = val
                const param = {id:this.groupId}
                this.getUsers(param, this.culpage,this.pagesize)
            },
            handleCurrentChange(val) {
                this.culpage = val
                const param = {id:this.groupId}
                this.getUsers(param, this.culpage,this.pagesize)
            },
            handleDelete(index,data) {
                this.$confirm('是否删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.getRequest('api//tg/userInfo/delUser/' + data.id).then(resp => {
                        if (resp.data.code==='0') {
                            this.userData.list.splice(index, 1)
                            Message.success("删除成功")
                        }else {
                            Message.warning(resp.data.message);
                        }
                    })
                })
            },
            handleAvatarSuccess(res, file) {
                if(res.code ==='0') {
                    this.userface = res.data
                    this.userForm.userface = res.data
                    Message.info("上传成功")
                }else {
                    Message.error("上传失败")
                }

            },
      },
        created(){
            this.loadGroupList()
        },

    }


</script>

<style scoped>
    .el-header {
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
    .groupList {
        padding: 10px;
    }

    .groupList .gnode {
        padding: 25px;
    }
    .btn i{
        margin-left: 3px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #67C23A;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 140px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 140px;
        height: 140px;
        display: block;
    }
</style>
